import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { http } from '../utils/http';

// 组件
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Form } from './components/Form';
import { CommentList } from './components/CommentList';

import './App.css'; // 导入样式

// 定义组件-类组件（维护页面状态）
export const App = () => {
  // hot: 热度排序  time: 时间排序
  const [tabs] = useState([
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ]);

  // tab 选中状态
  const [active, setActive] = useState('hot');

  // 评论列表
  const [list, setList] = useState([]);

  // 发表评论,传递给子组件 <Form/> 去调用
  const handleAddComment = async (txt) => {
    console.log(txt);
    // 组装评论对象
    const comment = {
      // id: Math.random(),
      id: Date.now(),
      author: '王心凌',
      comment: txt,
      time: new Date(),
      attitude: 0,
    };
    setList([comment, ...list]);

    // 下面是模拟请求
    // const comment = {
    //   // id: Math.random(),
    //   // id: Date.now(),
    //   author: '王心凌',
    //   comment: txt,
    //   time: new Date(),
    //   attitude: 0,
    // };
    // // 追加到评论列表,到服务器
    // const res = await http.post('/list', comment);
    // console.log(res.data);

    // setList([res.data, ...list]);
  };

  // 删除评论事件处理函数
  const delComment = (e, id) => {
    console.log(e, id);
    // 使用过滤-filter，生成一个新的数组
    const filtered = list.filter((item) => item.id !== id);
    // 设置页面数据
    setList(filtered);
  };

  // 点赞或踩的事件处理函数
  const changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    const newList = list.map((item) => {
      if (item.id === id) {
        // return {
        //   id: item.id,
        //   author: item.author,
        //   comment: item.comment,
        //   time: item.time,
        //   attitude: attitude,
        // };
        return { ...item, attitude };
      } else {
        return item;
      }
    });

    // 设置页面数据
    setList(newList);
  };

  // 排序
  const changeSortType = (type) => {
    console.log(type);
    // 热度按照id的降序排列
    if (type === 'hot') {
      // const newList = this.state.list.sort((a, b) => {
      //   // b - a 是降序
      //   return b.id - a.id;
      // });
      // 使用lodash第三方库
      const newList = _.orderBy(list, ['id'], ['desc']);
      // 设置页面数据
      setList(newList);
      setActive(type);
    } else {
      // 按照时间的升序
      const newList = list.sort((a, b) => {
        // 原来写的数据，这里直接就是 Date 对象。
        // 现在是字符串，要转为 Date 对象
        return new Date(a.time).getTime() - new Date(b.time).getTime();
      });
      // 设置页面数据
      setList(newList);
      setActive(type);
    }
  };

  // 组件第一次渲染完毕后，读取列表
  useEffect(() => {
    // 读取本地数据
    const list = JSON.parse(localStorage.getItem('list') || '[]');
    console.log(list);
    setList(list);

    // 从网络获取数据
    // const fetchData = async () => {
    //   const res = await http.get('/list');
    //   console.log(res.data);
    //   // 设置从网络获取的评论列表
    //   setList(res.data);
    // };
    // fetchData();
  }, []);

  // 副作用函数，只要 list 变化，就保存到本地
  // 别忘了，依赖，我们只关注 列表的变化
  useEffect(() => {
    localStorage.setItem('list', JSON.stringify(list));
  }, [list]);

  return (
    <div className="comment-root">
      <div className="comment-container">
        {/* 评论数 */}
        <CommentCount number={list.length} />

        {/* 排序tab */}
        <Tabs tabs={tabs} active={active} changeSortType={changeSortType} />

        {/* 发表评论区 */}
        <Form handleAddComment={handleAddComment} />

        {/* 评论列表区 */}
        <CommentList
          list={list}
          changeAttitude={changeAttitude}
          delComment={delComment}
        />
      </div>
    </div>
  );
};
